<template>
  <div class="content q-pa-sm">
    <table-basic :title="'分类管理'" :columns="columns" :tableData="tableData" :searchName="searchName"
                 @searchHandler="searchHandler"
                 @Refresh="Refresh"
                 @updateTable="updateTable"
                 @filtersHandler="filtersHandler"
                 @onDbclick="onDbclick"
    >
      <template v-slot:toolbar>
        <div class="row q-gutter-sm">
          <q-btn color="secondary" label="添加分类" @click="alert=true"  />
          <q-btn color="negative" :disable="checkState <= 0" label="批量删除" @click="deleteHandler"  />
        </div>
      </template>
    </table-basic>

    <form-basic :alert="alert" @close="close" :from="from" :title="'分类管理-添加'"
                @submit="submit"
                @uploadedImage="uploadedImage"
                @removedImage="removedImage"
                state="1"
    ></form-basic>

    <form-basic :alert="updatealert"  @close="close" :from="from"  :title="'分类管理-详情'"
                @submit="update"
                @uploadedImage="uploadedImage"
                @removedImage="removedImage"
                state="2"
    ></form-basic>
  </div>
</template>

<script>
import { getlotteryClassList, addlotteryClass, removelotteryClass, updatelotteryClass } from 'src/api/class'
export default {
  name: "class",
  data () {
    return {
      alert: false,
      updatealert: false,
      options: [],
      from:[
        {
          type: 'string', title: '类别名称', class: '', required: true, style: '', field: 'name',
          rule: [ val=> !!val || '请输入类别名称']
        },
        {
          type: 'number', title: '展示顺序', class: '', required: true, style: 'width: 200px',field: 'showOrder',
          rule: [ val=> !!val || '请输入展示顺序']
        },
        {
          type: 'file', title: '图片地址', uploadTitle: '推荐尺寸532*181', required: true, style: '', class:'col',field: 'imageUrl', maxFiles: 1
        },
        {
          type: 'select', title: '是否显示', class:'', options:[{value: 1, label: '是'},{value: 2, label: '否'}], style: 'width: 200px',field: 'isShow'
        }
      ],
      tableData:[],
      updateData: {},
      deleteDisable:true,
      searchName:[
        // {key: 'state',label:'奖品状态',type:'select',options: [{label:'全部',value:0},{label:'在售',value:1},{label:'下架',value:2}], filter: {label:'全部',value:0}},
        // {key: 'number',label:'奖品编号',type:'string',filter: ''},
      ],
      searchFilter: {},
      columns: [
        {name:'select', field: 'select'},
        {name: 'imageUrl', label: '商品大图', field: 'imageUrl', style: `width:532px;height:181px`},
        {name: 'name', align: 'center', label: '类别名称', field: 'name'},
        {name: 'showOrder',align: 'center', label: '展示顺序', field: 'showOrder',sortable: true},
        {name: 'isShow', align: 'center',label: '是否显示',format: (val, row) => `${val!==0?'是':'否'}`, field: 'isShow', sortable: true}
      ],
      page: {
        limit: 30,
        page: 1
      },
      imageUrl: []
    }
  },
  mounted() {
    this.initialize()
  },
  components: {
    TableBasic: () => import('components/tables/TableBasic'),
    FormBasic: () => import('components/dialog/formBasic')
  },
  methods:{
    initialize(page,limit){
      if(page)
        this.page.page = page
      if(limit)
        this.page.limit = limit
      let params = Object.assign(this.page, this.searchFilter)
      getlotteryClassList(params).then(
        success=>{
          this.tableData = success.map(item=>{
            item.select = false
            return item
          })
          this.$bus.$emit('UPDATE_PAGINATION', success.total)
        }
      )
    },
    onDbclick(index){
      this.updatealert = true
      this.updateData = this.tableData[index];
      this.$bus.$emit('updateState', this.updateData)
    },
    updateTable ({page, rowsPerPage, sortBy}){
      this.initialize(page, rowsPerPage)
    },
    uploadedImage(response){
      this.imageUrl.push(response.data)
    },
    removedImage(response){
      this.imageUrl = this.imageUrl.filter(r=>r !== response.data)
    },
    submit(data){
      let params = Object.assign(data,{
        imageUrl: this.imageUrl.join(',')
      })
      addlotteryClass(params).then(
        success=>{
          this.alert = false
          this.initialize()
        }
      )
    },
    update(data){
      let params = Object.assign(data,{
        imageUrl: this.imageUrl.join(','),
        id: this.updateData.id
      })
      updatelotteryClass(params).then(
        success=>{
          this.updatealert = false
          this.initialize()
        }
      )
    },
    deleteHandler(){
      let deleteids = this.checkItems.join(',')
      removelotteryClass({ids: deleteids}).then(
        success=>{
          this.initialize()
        }
      )
    },
    filtersHandler(filter){
      this.searchFilter = filter;
      this.initialize();
    },
    searchHandler(filter){

    },
    Refresh(){
      this.initialize();
    },
    checkRows(flag){
      // console.log(flag)
    },
    close(){
      this.alert = false
      this.updatealert = false
    }
  },
  computed:{
    checkState: function () {
      return this.tableData.reduce((prev, cur) => {
        return prev + (cur.select? 1: 0)
      }, 0)
    },
    checkItems: function () {
      return this.tableData.filter(r=>r.select).map(n=>{
        return n.id
      })
    }
  },
  created() {
    this.$bus.$on('checkRows', this.checkRows)
  },
  beforeDestroy() {
    this.$bus.$off('checkRows', this.checkRows)
  }
}
</script>

<style scoped>

</style>
